
<template>
  <div class="path-bar">
    <div>路径：</div>
    <div v-for="(path,index) in paths" :key="index">
      <div class="btn-link" v-if="index==0" @click="goFolderEvt(path)"> &nbsp;/&nbsp; </div>
      <div class="btn-link" v-if="index > 0 && index<(paths.length-1)" @click="goFolderEvt(path)">{{path.name}}{{index > 0? "&nbsp;/&nbsp;":""}}</div>
      <div v-else>{{path.name}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "file-path",
    props:['paths'],
    data() {
      return {
      }
    },
    created(){
      // 用 属性初始化 路径 数组
      console.log(this.paths)

    },
    methods:{
      goFolderEvt(path) {
        console.log(path)
        this.$emit("goFolder",path)
      }
    }
  }
</script>

<style lang="scss">
  .path-bar{
    display: flex;
    flex-direction: row;
    height:18px;
    line-height: 18px;
    border:1px dashed #409eff;
    border-radius: 4px;
    padding:4px 8px;
    margin:0 18px;
  }
  .btn-link{
    cursor:pointer;
    color:#409eff;
  }
</style>
